import React from 'react'
import { PAGE_RENDER_STATUS } from './render-page'

import { Icon } from 'antd-mobile'

import style from './page-render.less'

class PageRender extends React.Component {
  constructor () {
    super()
    this.containerRef = React.createRef()
    this.currentCanvas = null
  }

  render () {
    const { pageRender ,type} = this.props

    let imageStyle
    if(pageRender.renderStatus === PAGE_RENDER_STATUS.RENDERED){
      if(type){
        imageStyle = {
          width: "100%",
          height: "100%"
        }
      }else {
        imageStyle = {
          width: pageRender.renderedWidth + "px",
          height: pageRender.renderedHeight + "px",
        }
      }

    } else {
      imageStyle = {
        width: "100%",
        height: "100%"
      }
    }
    return (
      <div ref={this.containerRef} style={{height:type?'100%':'',width:type?'100%':''}}>
        {
          pageRender.renderStatus !== PAGE_RENDER_STATUS.RENDERED && <div className={style.loadingContainer}><Icon type='loading' size='lg' /></div>
        }
        {
          pageRender.renderedImageData && <img src={pageRender.renderedImageData} style={imageStyle} />
        }
      </div>
    )
  }
}

export { PageRender }
